<template>
  <view class="recharge-contanier">
    <Navbar :title="t('recharge.title')"> </Navbar>

    <view class="content">
      <view class="headers">
        <view
          class="title"
          v-for="(item, index) in ['digital', 'bank']"
          :class="activeindex == index && 'active'"
          @click="headerTab(index)"
          >{{ t("withdraw." + item) }}</view
        >
      </view>
      <view v-if="activeindex == 0" class="form-content">
        <UsdtRecharge></UsdtRecharge>
      </view>
      <view v-if="activeindex == 1" class="form-content">
        <view class="item cion-type">
          <view
            ><text>{{ t("withdraw.trading") }}</text
            ><text class="type">{{ cion }}</text></view
          >
          <view
            class="arrow"
            :class="{ 'arrow-up': isShow }"
            @click="cionChange"
            ><img src="../../static/recharge/arrow.png" alt=""
          /></view>
          <view class="cionSeletion" v-if="isShow">
            <radio-group @change="onCionChange">
              <view
                class="selectItem"
                v-for="(item, index) in cionList"
                :key="item.id"
              >
                <view class="way-text1">{{ item.pay_token }}</view>
                <radio
                  activeBackgroundColor="#2B9BB2"
                  :value="item.pay_token"
                  :checked="cion == item.pay_token"
                />
              </view>
            </radio-group>
          </view>
        </view>
        <view class="item">
          <view>{{ t("withdraw.pay_amount") }} :</view>
          <view class="input-item">
            <input
              :value="payAmount"
              class="input"
              @input="payAmountChange"
              :placeholder="ppammsg"
            />
          </view>
        </view>
        <view class="item">
          <view>{{ t("recharge.obtain_usdt") }} :</view>
          <view class="input-item">
            <input
              class="input"
              :value="obtainAmount"
              @input="obtainAmountChange"
              :placeholder="poummsg"
            />
          </view>
        </view>
        <view class="item">
          <view>{{ t("withdraw.notes") }} :</view>
          <view class="input-item">
            <textarea
              class="textarea"
              :maxlength="200"
              v-model="notes"
              :placeholder="notemsg"
            ></textarea>
          </view>
        </view>
        <view class="operation">
          <button
            class="btn"
            :loading="loading"
            :disabled="loading"
            @click="confirm"
          >
            {{ t("recharge.cfm") }}
          </button>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, onMounted } from "vue";
import Navbar from "../../components/Navbar.vue";
import UsdtRecharge from "./usdt-recharge.vue";
import api from "../../networks/apis";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const notemsg = ref(t("withdraw.pn"));
const ppammsg = ref(t("withdraw.ppam"));
const poummsg = ref(t("recharge.pou"));
const activeindex = ref(0);
const cion = ref("");
const payAmount = ref(""); //充值金额
const obtainAmount = ref(""); //获得金额
const notes = ref(""); //备注
const loading = ref(false); //按钮禁用
const cionList = ref([]); //币种兑换比率
const cionObj = ref({
  reate_time: "",
  id: 0,
  notes: "",
  obtain_token: "",
  pay_token: "",
  rate: 1,
  type: 0,
}); //已选币种
const form = ref({
  bank_name: "",
  bank_address: "",
  payee: "",
  payee_account: "",
  token: "",
  remark: "",
  pay_amount: "",
  pay_amount1: "",
});
const isShow = ref(false); //是否选择币种
const msg = t("recharge.msg1"); //是否选择币种
onMounted(() => {
  getRateData();
});

const getRateData = async () => {
  const res = await api.getRateApi();
  cionList.value = res.data;
  if (cionList.value.length > 0) {
    cionObj.value = cionList.value[0];
    cion.value = cionObj.value.pay_token;
  }
};

const headerTab = (index) => {
  if (activeindex.value == index) return;
  activeindex.value = index;
};

const cionChange = () => {
  isShow.value = !isShow.value;
};
const onCionChange = (e) => {
  cion.value = e.detail.value;
  cionObj.value = cionList.value.filter(
    (item) => item.pay_token == cion.value
  )[0];
  payAmount.value = "";
  obtainAmount.value = "";
  isShow.value = false;
};
// 输入充值金额
const payAmountChange = (e) => {
  payAmount.value = e.detail.value;
  obtainAmount.value = Number(payAmount.value * cionObj.value.rate).toFixed(3);
};
// 输入获得金额
const obtainAmountChange = (e) => {
  obtainAmount.value = e.detail.value;
  payAmount.value = Number(obtainAmount.value / cionObj.value.rate).toFixed(3);
};
const confirm = async () => {
  if (!cion.value) {
    uni.showToast({
      title: t("recharge.ente"),
      icon: "none",
    });
    return;
  }
  if (!payAmount.value) {
    uni.showToast({
      title: t("recharge.ente"),
      icon: "none",
    });
    return;
  }
  loading.value = true;
  const res = await api.rechargeOrderApi({
    token: cion.value, //pay_token
    pay_amount: payAmount.value, //金额
    notes: notes.value, //备注
  });
  loading.value = false;
  if (res.code != 0) {
    uni.showToast({
      title: res.msg || res.data.msg || "recharge fail",
      icon: "error",
      duration: 2000,
    });
  } else {
    uni.showToast({
      title: msg,
      icon: "success",
      duration: 1000,
    });
    const t = setTimeout(() => {
      clearTimeout(t);
      uni.reLaunch({
        url: "/pages/my/index",
      });
    }, 1500);
  }
};
</script>
<style lang="scss" scoped>
.recharge-contanier {
  width: 750rpx;
  min-height: 100vh;
  padding-bottom: 85rpx;
  background: linear-gradient(180deg, #040a40 0%, #042e40 0%, #0d1324 100%);
  color: #fff;
  .content {
    margin-top: 35rpx;
    padding: 0 25rpx;
    .headers {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 105rpx;
      background: #060a0d;
      border-radius: 53rpx 53rpx 53rpx 53rpx;
      .title {
        width: 50%;
        height: 100%;
        line-height: 105rpx;
        text-align: center;
      }
      .active {
        background: linear-gradient(133deg, #91e3d7 0%, #2b9bb2 100%);
        border-radius: 53rpx 53rpx 53rpx 53rpx;
        color: #060a0d;
      }
    }
    .form-content {
      margin-top: 35rpx;

      .item {
        margin: 25rpx 0;
        .input-item {
          width: 100%;
          //   height: 89rpx;
          height: auto;
          display: flex;
          align-items: center;
          padding-left: 15rpx;
          background: #060a0d;
          border-radius: 12rpx;
          margin-top: 15rpx;
          .input {
            width: 100%;
            height: 89rpx;
          }
          .textarea {
            height: 234rpx;
            padding: 15rpx;
          }
        }
        .detail-pic {
          width: 282rpx;
          height: 242rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 35rpx;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .cion-type {
        position: relative;
        height: 89rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid #4f575b;
        .type {
          margin-left: 15rpx;
          color: #2b9bb2;
        }
        .arrow {
          width: 26rpx;
          height: 26rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .arrow-up {
          transform: rotate(90deg);
        }
        .cionSeletion {
          position: absolute;
          right: 0;
          top: 89rpx;
          width: 255rpx;
          background-color: #060a0d;
          border-radius: 12rpx;
          padding: 15rpx 28rpx;
          z-index: 1000;
          .selectItem {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 15rpx 0;
          }
        }
      }

      .operation {
        margin-top: 45rpx;
        .btn {
          height: 99rpx;
          line-height: 99rpx;
          background: linear-gradient(133deg, #91e3d7 0%, #2b9bb2 100%);
          border-radius: 30rpx 30rpx 30rpx 30rpx;
          font-weight: 600;
        }
      }
      .operation1 {
        margin-top: 30vh;
      }
    }
  }
}
</style>
